<template>
  <div>
    <!-- 头部导航 -->
    <Header />


    <!-- Banner轮播图 -->
    <div id="banner">
      <div id="full-screen-slider">
        <ul id="slides">
          <li v-for="(slide, index) in slides" :key="index" 
              :class="{'slide-active': currentIndex === index}"
              @click="goDetail({id: slide.activityId, categoryId: slide.categoryId}, 2)">
            <img :src="slide.imgUrl" alt="轮播图" style="width: 100%; height: 100%"/>
          </li>
        </ul>
        <!-- 底部指示器 -->
        <div class="slider-indicators">
          <span v-for="(slide, index) in slides" 
                :key="'indicator-'+index" 
                :class="{'active': currentIndex === index}"
                @click.stop="setSlide(index)"></span>
        </div>
      </div>
    </div>

    <!-- 关于美国FIL -->
    <div id="homecontent">
      <!-- <div id="homeabouttitle">关于美国FIL</div>
      <div id="homeabout">
        美国FIL仪器仪表有限公司于2004年成立于美国芝加哥市，2012年搬迁至美国俄勒冈州，<br />
        具备先进的厂户和研发中心，经过近十年的发展拥有了雄厚的科研力量，丰富的人才资源和多学科综合优势，专业<br />
        从事工业仪表研发、制造及服务。是一家处于国际领先地位的仪表仪器研发制造商，在国际同行业中率先通过<br />
        产品质量管理体系认证。企业秉承诚信为本、创新为翼的经营理念，致力于全球工业仪表领域提供有竞争力的<br />
        综合解决方案和服务，提升客户体验，为客户创造最大价值。
      </div>
      <div id="tuoyuan"></div>
      <div class="clear"></div> -->
    </div>

    <!-- 产品展示 -->
    <div id="homeprobg" v-if="products.length">
      <div id="homepro">
        <div id="homeprolist">
          <div class="item" v-for="(product, index) in products" :key="index" @click="goCate(product)">
            <div class="pic">
              <img :src="product.logoUrl" alt="" style="width: 246px; height: 265px;">
            </div>
            <div class="text">{{ product.name }}</div>
          </div>
          <div class="clear"></div>
        </div>
        <div id="homepropoint"></div>
      </div>
    </div>

    <!-- 新闻和联系方式 -->
    <div id="homenewsadd">
      <div id="homenews">
        <div id="homenewstitle">
          <span class="font_24 font_bold">最新动态</span> / Latest News
        </div>
        <div>
          <div id="hangye">行业资讯</div>
          <div id="homenewslist">
            <div v-for="(item, index) in news" :key="index">
              <div class="date">{{ item.createTime }}</div>
              <div class="title">
                <a class="" href="javascript:void(0)" @click="goDetail(item, 3)">{{ item.title }}</a>
              </div>
            </div>
            <div class="info">
              ......<br />
              <br />
              <a class="a_black_12" href="javascript:void(0)" @click="goMoreNews()">More+</a> <br />
              ----------------------------------------------------------
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div id="homecontact">
        <div id="homenewstitle">
          <span class="font_24 font_bold">联系方式</span> / Contact us
        </div>
        <div>
          <span class="font_14">中国 24小时热线：<br />
            <img align="默认位置" alt="" border="0" src="@/assets/images/400.jpg" style="不应用">
          </span><br />
          <span class="font_14">销售热线：<br />
            <img height="26" src="@/assets/images/sysimages/2.jpg">
          </span><br />
          服务热线：<br />
          <img height="26" src="@/assets/images/sysimages/3.jpg"><br />
          <img align="默认位置" alt="" src="@/assets/images/wx.jpg"
            style="border-width: 0; border-style: solid; margin-top: 10px; margin-bottom: 10px;" />
          <br />
          <div>
            微信公众号：filben<br />
            <br />
            备案号：<a href="http://beian.miit.gov.cn/">粤ICP备11035365号</a>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div id="homenewstitle">
        <span class="font_24 font_bold">友情链接</span> / Links
      </div>
      <div>
        <a href="http://www.chem17.com/st162826/index.html" target="_blank">中国化工仪器网展台</a>
        <a href="http://www.gkzhan.com/st40187/index.html" target="_blank">工控网展台</a>
        <a href="http://www.ybzhan.cn/st23663/index.html" target="_blank">仪表展览网展台</a>
        <a href="http://www.chem17.com" target="_blank">中国化工仪器网</a>
      </div>
    </div>

    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import api from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'IndexPage',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      currentIndex: 0,
      showPopup: false,
      slides: [],
      products: [],
      news: [],
      timer: null
    }
  },
  computed: {
    ...mapGetters(['navList', 'baseNav'])
  },
  methods: {
    init() {
      api.getAdList().then(res => {
        this.slides = res.data || []
        this.startSlideshow();
      })
      api.getProcudtList({type: 2, pageNum: 1, pageSize: 4}).then(res => {
        this.products = res.data || []
      })
      api.getContentList({type: 3, isHot: 1, page: 1, pageSize: 3}).then(res => {
        this.news = (res.rows || []).map(item => ({
          ...item,
          createTime: item.createTime.split(' ')[0]
        }))
      })
    },
    setSlide(index) {
      this.currentIndex = index;
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    },
    startSlideshow() {
      this.timer = setInterval(this.nextSlide, 5000);
    },
    stopSlideshow() {
      clearInterval(this.timer);
    },
    closePopup() {
      this.showPopup = false;
      localStorage.setItem('hideProductPopup', 'true');
    },
    goDetail(item, type) {
      let nav = this.baseNav.find(e => e.id == item.categoryId)
      if (!nav)return
      localStorage.setItem('navInfo', JSON.stringify(nav))
      if (type == 2) {
        this.$router.push({
          path: '/product/'+nav.parentId+'?id='+nav.id
        })
        return
      }
      let path = {
        '1': '/about-detail',
        '2': '/product-detail',
        '3': '/case-detail',
        '4': '/news-detail'
      }
      this.$router.push({path: path[type] + '?id=' + item.id})
    },
    goCate(item) {
      this.$router.push({
        path: '/product/'+item.parentId+'?id='+item.id
      })
    }
  },
  mounted() {
    this.init()

    // 添加产品升级弹窗
    this.showPopup = localStorage.getItem('hideProductPopup') !== 'true';

    // 添加jQuery轮播图功能
    this.$nextTick(() => {
      if (window.jQuery) {
        window.jQuery('#full-screen-slider').slide({
          mainCell: "#slides",
          effect: "fold",
          autoPlay: true,
          interTime: 5000
        });
      }
    });
  },
  beforeDestroy() {
    this.stopSlideshow();
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';

/* 轮播图渐入效果 */
#slides li {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#slides li.slide-active {
  opacity: 1;
  z-index: 1;
}

/* 底部指示器样式 */
.slider-indicators {
  list-style: none;
  position: absolute;
  left: 50%;
  z-index: 9900;
  padding: 5px 15px 20px 0;
  margin-left: 370px;
  bottom: 0;
}

.slider-indicators span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-left: 15px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #2196F3;
}
</style>